<template>
  <div class="page flex-col">
    <div class="group_1 flex-col">
      <div class="box_1 flex-col">
        <div class="group_2 flex-col">
          <div class="box_3 flex-col justify-end">
            <div class="group_5 flex-col">
              <div class="block_2 flex-row">
                <div
                  v-for="item in list"
                  @click="goUnPwd(item)"
                  :key="item.bidSectionId"
                  class="box_10 flex-col"
                  :class="{ active: item.kaibiaoStatus == 1 }"
                >
                  <div class="text-wrapper_6 flex-row">
                    <a-tooltip placement="topLeft">
                      <template slot="title">
                        <span>{{ item.bidSectionName }}</span>
                      </template>
                      <span class="text_16">{{ item.bidSectionName }}</span>
                    </a-tooltip>
                    <span class="kb-btn" v-if="item.kaibiaoStatus == 0 && roleType == 'AGENCY'">
                      <a-button @click.stop="start(item)">开标</a-button>
                    </span>
                  </div>
                  <div class="text-wrapper_7 flex-row">
                    <span class="text_18">开标时间:</span>
                    <span> {{ item.kaibiaoDate }}</span>
                  </div>
                  <div class="text-wrapper_7 flex-row">
                    <span class="text_18">开标状态:</span
                    ><span class="status">{{ getKaibiaoStatus(item.kaibiaoStatus) }}</span>
                  </div>

                  <div class="text-wrapper_7 flex-row justify-between">
                    <span class="text_18">标段描述:</span>
                    <span>{{ item.bidSectionContent }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
export default {
  components: {},
  data() {
    return { roleType: Vue.ls.get('User-Type'), list: [], showChange: false, constants: {} }
  },
  created() {
    this.getData()
  },
  methods: {
    getKaibiaoStatus(s){
      switch (s) {
        case '1':
          return '已开标'
        case '2':
          return '已完成'
        case '3':
          return '作废'
        default:
          return '未开标'
      }
    },
    start(item) {
      this.$http.post('/exKaibiao/start?bidSectionId=' + item.bidSectionId).then(r => {
        this.goUnPwd(item, r)
      })
    },
    goUnPwd(item, r) {
      if (item.kaibiaoStatus == '1' || r.result.status == 1) {
        this.$router.push({
          path: 'open-unpwd',
          query: { bidSectionName: item.bidSectionName, bidSectionId: item.bidSectionId, ...this.$route.query },
        })
      }
    },
    getData() {
      this.$http.get('/exKaibiao/exSection/listAll', { params: { projectId: this.$route.query.projectId } }).then(r => {
        this.list = r.result
      })
    },
    changeShow: function() {
      this.showChange = !!this.showChange
    },
  },
}
</script>
<style src="./common.css" />

<style scoped>
.page {
  position: relative;
  width: 100vw;

  overflow: hidden;
  .group_1 {
    width: 100vw;
    .box_1 {

      width: 100vw;
      .group_2 {
        position: relative;
        width: 100vw;
        background: rgb(6, 95, 222);

        .box_3 {
          background-color: rgba(3, 37, 146, 0.68);
          width: 93.75vw;

          margin: 3.17vw 0 3.12vw 3.12vw;

          .group_5 {
            background-color: rgba(1, 55, 180, 1);
            position: relative;
            width: 87.97vw;
            height: 39.02vw;
            margin: 1.61vw 0 0 2.91vw;
            .block_1 {
              background-color: rgba(6, 95, 221, 1);
              width: 87.97vw;
              height: 0.06vw;
              margin-top: 7.61vw;
            }
            .block_2 {
              width: 81.36vw;
              margin: 2.09vw 0 0 1.9vw;

              .box_10 {
                .status {
                  color: rgba(255, 207, 14, 1);
                }
                &.active {
                  .status {
                    color: #000;
                  }
                  background-color: rgba(255, 207, 14, 1);
                }
                background-color: rgba(255, 255, 255, 1);
                margin-left: 1.41vw;
                width: 19.28vw;
                padding-bottom: 1vw;
                .text-wrapper_6 {
                  width: 11.31vw;
                  align-items: center;
                  margin: 1vw 0 0 1.25vw;
                  .text_16 {
                    white-space: nowrap; /* 防止文本换行 */
                    overflow: hidden; /* 隐藏溢出的内容 */
                    text-overflow: ellipsis; /* 溢出部分用省略号表示 */
                    width: 12.31vw;
                    height: 1.2vw;
                    overflow-wrap: break-word;
                    color: rgba(51, 51, 51, 1);
                    font-size: 1.25vw;
                    font-family: AlibabaPuHuiTi-Bold;
                    font-weight: 700;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 1.25vw;
                  }
                }
                .text-wrapper_7 {
                  width: 2.45vw;
                  align-items: center;
                  margin: 0.98vw 0 0 1.25vw;
                  .text_18 {
                    & + span {
                      display: inline-flex;
                      margin-left: 0.2vw;
                      width: 13vw;
                      white-space: nowrap; /* 防止文本换行 */
                      overflow: hidden; /* 隐藏溢出的内容 */
                      text-overflow: ellipsis; /* 溢出部分用省略号表示 */
                    }

                    overflow-wrap: break-word;
                    color: rgba(102, 102, 102, 1);
                    font-size: 0.83vw;
                    font-family: AlibabaPuHuiTi-Regular;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    margin-top: 0.11vw;
                    margin-bottom: 0.11vw;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
